<template>
  <a-row :gutter="gutter" type="flex" class="text-row-group">
    <a-col v-for="(item, index) of columns" :key="item.key || index" :span="item.colSpan || colSpan">
      <slot>
        <text-row-tight v-if="tight" v-bind="rowOption" :label="item.label" :text="getText(item)" />
        <text-row v-else v-bind="rowOption" :label="item.label" :text="getText(item)" />
      </slot>
    </a-col>
  </a-row>
</template>
<script>
import TextRowTight from './text-row-tight.vue';
import TextRow from './text-row.vue';
export default {
  name: 'text-row-group',
  components: { TextRow, TextRowTight },
  props: {
    tight: { type: Boolean, default: true },
    gutter: { type: Number, default: 0 },
    colSpan: { type: Number, default: 24 },
    columns: {
      type: Array,
      default: () => [
        /*{label: "",key:"", colSpan:"", format: ()=>{}}*/
      ],
    },
    dataSource: { type: Object, default: () => ({}) },
    rowOption: { type: Object, default: () => ({}) },
  },
  methods: {
    getText(item = {}) {
      const text = this.dataSource[item.key];
      if (typeof item.format === 'function') {
        return item.format(text, this.dataSource, item);
      }
      return text;
    },
  },
};
</script>

<style scoped></style>
